<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>匠心独创</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../css/animate.css" type="text/css" />
  <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="../css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="../css/font.css" type="text/css" />
  <link rel="stylesheet" href="../css/app.css" type="text/css" />
  
  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body class="">
  <section class="vbox">
    <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
      <div class="navbar-header aside bg-info dk">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
          <i class="icon-list"></i>
        </a>
        <a href="index.html" class="navbar-brand text-lt">
          <i class="icon-earphones"></i>
          <img src="images/logo.png" alt="." class="hide">
          <span class="hidden-nav-xs m-l-sm">DIY</span>
        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
          <i class="icon-settings"></i>
        </a>
      </div>      <ul class="nav navbar-nav hidden-xs">
        <li>
          <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
            <input type="text" class="form-control input-sm no-border rounded" placeholder="项目搜索">
          </div>
        </div>
      </form>
      <div class="navbar-right ">
        <ul class="nav navbar-nav m-n hidden-xs nav-user user">
          <li class="dropdown">
            <a href="project-index.html" class="dropdown-toggle bg clear"  >
              发布项目
              <span class=" fa fa-plus-square">
              </span>
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="../images/a0.png" alt="...">
              </span>
             郑浩 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu animated fadeInRight">
              <li>
                <span class="arrow top"></span>
                <a href="personal_set.html">设置</a>
              </li>
              <li>
                <a href="docs.html">帮助</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="signin.html">退出</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>      
    </header>
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-black dk aside hidden-print" id="nav">          
          <section class="vbox">
            <section class="w-f-md scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
                


                <!-- nav -->                 
                <nav class="nav-primary hidden-xs">

                  <ul class="nav bg clearfix">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      类别
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="icon-disc icon text-success"></i>
                        <span class="font-bold">教育</span>
                      </a>
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="icon-music-tone-alt icon text-info"></i>
                        <span class="font-bold">科技</span>
                      </a>
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="icon-drawer icon text-primary-lter"></i>
                        <span class="font-bold">艺术</span>
                      </a>
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="icon-list icon  text-info-dker"></i>
                        <span class="font-bold">生活</span>
                      </a>
                    </li>
                    <li>
                      <a href="index.html" >
                        <i class="icon-social-youtube icon  text-primary"></i>
                        <span class="font-bold">娱乐</span>
                      </a>
                    </li>
                    <li>
                      <a href="index.html" >
                        <i class="icon-social-youtube icon  text-primary"></i>
                        <span class="font-bold">废物利用</span>
                      </a>
                    </li>
                    <li class="m-b hidden-nav-xs"></li>
                  </ul>
                  <ul class="nav" data-ride="collapse">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      参与
                    </li>
                    <li >
                      <a href="project-index.html" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-screen-desktop icon">
                        </i>
                        <span>发布项目</span>
                      </a>
                    </li>
                    <li >
                      <a href="personal_profile.html" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-screen-desktop icon">
                        </i>
                        <span>个人中心</span>
                      </a>
                    </li>
                  </ul>


                </nav>
                <!-- / nav -->
              </div>
            </section>
            
            <footer class="footer hidden-xs no-padder text-center-nav-xs">
              <div class="bg hidden-xs "></div>            </footer>
          </section>
        </aside>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox bg-white">
            <header class="header bg-light lter hidden-print">
              <a href="#" class="btn btn-sm btn-info pull-right" onClick="window.print();">Print</a>
              <p>Invoice</p>
            </header>
            <section class="scrollable wrapper">
              <i class="fa fa-apple fa fa-3x"></i>
              <div class="row">
                <div class="col-xs-6">
                  <h4>Apple Inc.</h4>
                  <p><a href="http://www.apple.com">www.apple.com</a></p>
                  <p>1 Infinite Loop <br>
                    95014 Cuperino, CA<br>
                    United States
                  </p>
                  <p>
                    Telephone:  800-692-7753<br>
                    Fax:  800-692-7753
                  </p>
                </div>
                <div class="col-xs-6 text-right">
                  <p class="h4">#9048392</p>
                  <h5>29th Mar 2013</h5>           
                </div>
              </div>          
              <div class="well bg-light b m-t">
                <div class="row">
                  <div class="col-xs-6">
                    <strong>TO:</strong>
                    <h4>John Smith</h4>
                    <p>
                      2nd Floor<br>
                      St John Street, Aberdeenshire 2541<br>
                      United Kingdom<br>
                      Phone: 031-432-678<br>
                      Email: youemail@gmail.com<br>
                    </p>
                  </div>
                  <div class="col-xs-6">
                    <strong>SHIP TO:</strong>
                    <h4>John Smith</h4>
                    <p>
                      2nd Floor<br>
                      St John Street, Aberdeenshire 2541<br>
                      United Kingdom<br>
                      Phone: 031-432-678<br>
                      Email: youemail@gmail.com<br>
                    </p>
                  </div>
                </div>
              </div>
              <p class="m-t m-b">Order date: <strong>26th Mar 2013</strong><br>
                  Order status: <span class="label bg-success">Shipped</span><br>
                  Order ID: <strong>#9399034</strong>
              </p>
              <div class="line"></div>
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 60px">QTY</th>
                    <th>DESCRIPTION</th>
                    <th style="width: 140px">UNIT PRICE</th>
                    <th style="width: 90px">TOTAL</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>iPhone 5 32GB White & Silver (GSM) Unlocked</td>
                    <td>$749.00</td>
                    <td>$749.00</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>iPad mini with Wi-Fi 32GB - White & Silver</td>
                    <td>$429.00</td>
                    <td>$858.00</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-right"><strong>Subtotal</strong></td>
                    <td>$1607.00</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-right no-border"><strong>Shipping</strong></td>
                    <td>$0.00</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-right no-border"><strong>VAT Included in Total</strong></td>
                    <td>$0.00</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-right no-border"><strong>Total</strong></td>
                    <td><strong>$1607.00</strong></td>
                  </tr>
                </tbody>
              </table>              
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
  
  <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>

</body>
</html>